<template>
	<view class="container">
		<view class="box">
			<view class="cell flex-ac flex-b">
				<view class="hd"><text style="color: #FF372C;">*</text>货物名称</view>
				<view class="md">
					<input type="text" v-model="form.goodsName" placeholder="请选择货物名称" placeholder-style="color: #cccccc;"/>
				</view>
			</view>
			<view class="cell flex-ac flex-b">
				<view class="hd"><text style="color: #FF372C;">*</text>货物类型</view>
				<view class="md" @click="show = true">
					<input type="text" v-model="goodsTypeName" placeholder="请选择货物类型" disabled placeholder-style="color: #cccccc;"/>
				</view>
				<image src='../../../static/img/yjt.png' class="more" mode=""></image>
			</view>
		</view>
		<u-select v-model="show" mode="single-column" :list="goodsType" @confirm="confirmHwlx" title="选择货物类型" confirm-color='#3db020'></u-select>
		<view class="box">
			<view class="cell flex-ac flex-b">
				<view class="hd"><text style="color: #FF372C;">*</text>货物总量</view>
				<view class="md">
					<input type="digit" v-model="form.goodsTotalQuantity" placeholder="请填写货物总量" placeholder-style="color: #cccccc;"/>
				</view>
				<view class="bd" @click="show2 = true">{{form.goodsQuantityUnit}}</view>
				<image src='../../../static/img/xjt.png' @click="show2 = true" class="more" style="margin-left: 0;" mode=""></image>
			</view>
			<view class="cell flex-ac flex-b">
				<!-- <view class="hd"><text style="color: #FF372C;">*</text>每车预估量</view> -->
				<view class="hd">每车预估量</view>
				<view class="md">
					<input type="digit" v-model="form.vehicleLoadQuantity" placeholder="请填写每车预估数量" placeholder-style="color: #cccccc;"/>
				</view>
				<view class="bd">{{form.goodsQuantityUnit}}</view>
			</view>
		</view>
		<u-select v-model="show2" mode="single-column" :list="danwei" @confirm="confirmDw" title="选择单位" confirm-color='#3db020'></u-select>
		
		<view class="box">
			<view class="cell flex-ac flex-b">
				<!-- <view class="hd"><text style="color: #FF372C;">*</text>需要车辆数</view> -->
				<view class="hd">需要车辆数</view>
				<view class="flex-ac">
					<view class="n-box flexmid" @click="sub">
						<image src="../../../static/img/sub.png" class="sub-image" mode=""></image>
					</view>
					<view class="num-box middle">{{form.needVehicleQuantity}}辆</view>
					<view class="n-box middle" @click="add">
						<image src="../../../static/img/add2.png" class="add-image" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		
		<view class="foot">
			<view class="btnBox flex-ac">
				<view class="btn-1 middle" @click="submit">确认</view>
			</view>
			<x-botSpace></x-botSpace>
		</view>
		
	</view>
</template>

<script>
	import { goodsType } from '@/utils/goodsType.js'; // 
	export default {
		data() {
			return {
				// carNum: 1,
				goodsType: goodsType,
				form:{
					goodsName: '', // 货物名称【必须】
					goodsType: '', // 货物类型
					goodsTotalQuantity: '',// 货物总量【必须】
					goodsQuantityUnit: '吨' ,//货物数量单位【必须】
					vehicleLoadQuantity: '',// 每车预估数量
					needVehicleQuantity: 1
				},
				goodsTypeName: '',
				show:false,
				danwei: [
					{ value: 1, label: '吨' },
					{ value: 2, label: '方' },
					{ value: 3, label: '车' },
					{ value: 4, label: '件' },
				],
				show2: false
			}
		},
		onLoad(opt) {
			if(opt) console.log('opt:', opt)
			// if(opt.dw) this.form.goodsQuantityUnit = opt.dw
			let pages = getCurrentPages()
			let preVpage = pages[pages.length - 2]
			this.form.goodsName =  preVpage.$vm.form.goodsName
			this.form.goodsType =  preVpage.$vm.form.goodsType
			this.form.goodsTotalQuantity =  preVpage.$vm.form.goodsTotalQuantity
			this.form.goodsQuantityUnit =  preVpage.$vm.form.goodsQuantityUnit
			this.form.vehicleLoadQuantity =  preVpage.$vm.form.vehicleLoadQuantity
			this.form.needVehicleQuantity =  preVpage.$vm.form.needVehicleQuantity
			this.getGoodsTypeName(preVpage.$vm.form.goodsType)
		},
		watch:{
			'form.goodsTotalQuantity'(){
				if(this.form.goodsTotalQuantity && this.form.vehicleLoadQuantity){
					let n = this.form.goodsTotalQuantity / this.form.vehicleLoadQuantity
					console.log('n:', n % 1)
					if(n % 1 > 0){
						this.form.needVehicleQuantity = parseInt(n) + 1
					}else{
						this.form.needVehicleQuantity = n
					}
				}else{
					this.form.needVehicleQuantity = ''
				}
			},
			'form.vehicleLoadQuantity'(){
				if(this.form.goodsTotalQuantity && this.form.vehicleLoadQuantity){
					let n = this.form.goodsTotalQuantity / this.form.vehicleLoadQuantity
					console.log('n:', n % 1)
					if(n % 1 > 0){
						this.form.needVehicleQuantity = parseInt(n) + 1
					}else{
						this.form.needVehicleQuantity = n
					}
				}else{
					this.form.needVehicleQuantity = ''
				}
			},
		},
		methods: {
			submit(){
				if(this.form.goodsName === '' || this.form.goodsType === '' || this.form.goodsTotalQuantity === '' ){
					return this.$Toast.message('请完善货物信息')
				}
				let pages = getCurrentPages()
				let prevPage = pages[pages.length - 2]
				prevPage.$vm.form = Object.assign(prevPage.$vm.form, this.form)
				this.$Toast.messageIcon('添加成功')
				setTimeout(()=>{
					this.$Jump.Back(1)
				},1000)
			},
			sub(){
				if(this.form.needVehicleQuantity === 1) return
				else this.form.needVehicleQuantity--
			},
			add(){
				this.form.needVehicleQuantity++
			},
			confirmDw(e){
				this.form.goodsQuantityUnit = e[0].label
				this.unit = e[0].label
			},
			confirmHwlx(e){
				this.form.goodsType = e[0].value
				this.goodsTypeName = e[0].label
			},
			
			// 获取商品名称
			getGoodsTypeName(code){
				for(let i = 0;i<this.goodsType.length; i++){
					if(this.goodsType[i].value == code){
						this.goodsTypeName = this.goodsType[i].label
						break
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	page{ background-color: #f9f9f9; }
</style>

<style lang="scss" scoped>
	// @import './style.scss';
	.foot{
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 10;
	}
	.box{
		width: 100%;
		background-color: #fff;
		padding: 0 20rpx;
		margin-bottom: 20rpx;
		.cell{
			width: 100%;
			border-bottom: 2rpx solid #F5F7FB;
			height: 110rpx;
			.n-box{
				width: 80rpx;
				height: 80rpx;
				background: #f7f7f7;
				border-radius: 10rpx;
				.sub-image{
					width: 32rpx;
					height: 4rpx;
				}
				.add-image{
					width: 32rpx;
					height: 32rpx;
				}
			}
			.num-box{
				width: 160rpx;
				height: 80rpx;
				background: #f7f7f7;
				font-size: 30rpx;
				margin: 0 4rpx;
			}
			.hd{
				font-size: 30rpx;
				color: #333;
				font-weight: bold;
				flex-shrink: 0;
				margin-right: 20rpx;
			} 
			.md{
				flex: 1;
				text-align: right;
				font-size: 30rpx;
				color: #333;
				font-weight: bold;
				flex-shrink: 0;
				input{
					width: 100%;
					height: 110rpx;
					line-height: 110rpx;
				}
				textarea{
					width: 100%;
					// height: 110rpx;
					// padding-top: 20rpx;
				}
			}
			.bd{
				font-size: 30rpx;
				color: #333;
				font-weight: bold;
				margin-left: 10rpx;
			}
			.bn-btn{
				width: 130rpx;
				height: 70rpx;
				background: #f7f7f7;
				border-radius: 6rpx;
				color: #999;
				font-size: 30rpx;
			}
			.bn-btn:first-child{
				margin-right: 20rpx;
			}
			.sel{
				color: #3DB020;
				border: 2rpx solid #3cb020;
			}
		}
		.cell:last-child{
			border: none;
		}
	}
</style>
